<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>祥愿堂</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" href="../css/public.css">
    <style>
      html,
      body {
          width: 100%;
          height: 100%;
          background: #F8F8FE;
      }
      header {
        height: 2.6rem;
      }
      /*头部*/
      .header {
          display: none;
          position: fixed;/* 决定了搜索框置顶 */
          top: 1.5rem;
          left: 0;
          right: 0;
          background-color: #fff;
          z-index: 10;
      }

      .header.on {
          display: block;
      }

      .header .search {
          height: 100%;
          font-size: 0.5rem;
          position: relative;
          height: 1rem;
          padding: .9rem 0;
          display: block;
          background-color:#F8F8FE;
          border-bottom: 1px solid #ddd !important;
      }

      .header .search input[type=search] {
          height: 1.5rem;
          width: 78%;
          border: 0;
          border-radius: 0.2rem;
          position: absolute;
          left:1rem;
          background-color: rgba(0,0,0,0.1);
          text-align: center;
          font-size: 0.7rem;
          outline: 0;
          z-index: 100;
          opacity: 0.8;
      }

      .header .search .placeholder {
        position: absolute;
        top: 2px;
        left: 0;
        right: 0;
        display: inline-block;
        height: 34px;
        line-height: 34px;
        border: 0;
        border-radius: 6px;
        text-align: left;
        color: #999;
        z-index: 1;
      }
      .header .search .placeholder .iconfont {
        display: inline-block;
        background: url(../image/icon_search.png);
        background-position: left center;
        background-size: 1.2rem 1.2rem;
        background-repeat: no-repeat;
        width: 1.2rem;
        margin: .95rem 0 0 1.2rem;
        padding: .6rem 0;
      }
      .header .search .placeholder .text {
        vertical-align: top;
        height: 1.2rem;
        width: 1.2rem;
        position: absolute;
        right: 1rem;
        top:0.6rem;
      }

      .header .search .placeholder .icon_saoma {
        height: 1.2rem;
        width: 1.2rem;
      }

      .header .friends{
        background-color: #fff;
      }

      .header .my {
        position: relative;
        top: -1.5rem;
        background: #2E8EFF;
        height: 4.38rem;
        display: block;
        z-index: 100;
      }

      .header .my .myback {
          height: 1.2rem;
          width: .8rem;
          display: inline-block;
          background:  url(../image/ucenter/back_white.png);
          background-position: center center;
          background-size: .8rem .8rem;
          background-repeat: no-repeat;
          position: relative;
          left:1.3rem;
          top:2.65rem;
          z-index: 100;
      }

      .header .my .right {
          position: absolute;
          right: 0;
          top:2rem;
          width: 2.8rem;
          height: 2.8rem;
          background: url(../image/ucenter/setting.png);
          background-position: center center;
          background-size: .9rem .9rem;
          background-repeat: no-repeat;
      }

      .header .friends {
        position: relative;
        background: #F8F8FE;
        display: block;
      }
      .header .friends .goback {
          height: 1.2rem;
          width: .8rem;
          display: inline-block;
          background:  url(../image/ucenter/goback.png);
          background-position: center center;
          background-size: .8rem .8rem;
          background-repeat: no-repeat;
          position: absolute;
          left:1.3rem;
          top:1.2rem;
          z-index: 100;
      }
      .header .friends .title {
          text-align: center;
          font-size: .75rem;
          color: #000000;
          height: 3.5rem;
          line-height: 3.5rem;
      }


      /**底部切换栏**/
      /*底部*/
      footer {
          color: #000000;
          height: 2.2rem;
          background-color:#F8F8FE;
          border-top:1px solid #ddd !important;
      }

      .flex-wrap .bar-tab-item {
          position: relative;
          text-align: center;
      }

      .flex-wrap .bar-tab-item .bar-tab-label {
          display: block;
          font-size: .6rem;
          position: relative;
          height: 1rem;
          line-height: 1rem;
          top:1.1rem;
      }

      .flex-wrap .bar-tab-item .icon {
          position: absolute;
          left: 0;
          width: 100%;
          height: 1.3rem;
      }

      .flex-wrap .bar-tab-item .main {
          background: url(../image/footer_one.png);
          background-position: center center;
          background-size: 1.2rem 1.2rem;
          background-repeat: no-repeat;
      }

      .flex-wrap .active .main {
          background: url(../image/footer_one_active.png);
          background-position: center center;
          background-size:1.2rem 1.2rem;
          background-repeat: no-repeat;
      }

      .flex-wrap .bar-tab-item .friends {
          background: url(../image/footer_two.png);
          background-position: center center;
          background-size: 1.2rem 1.2rem;
          background-repeat: no-repeat;
      }

      .flex-wrap .active .friends {
          background: url(../image/footer_two_active.png);
          background-position: center center;
          background-size: 1.2rem 1.2rem;
          background-repeat: no-repeat;
      }

      .flex-wrap .bar-tab-item .ucenter {
          background: url(../image/footer_three.png);
          background-position: center center;
          background-size: 1.2rem 1.2rem;
          background-repeat: no-repeat;
      }

      .flex-wrap .active .ucenter {
          background: url(../image/footer_three_active.png);
          background-position: center center;
          background-size: 1.2rem 1.2rem;
          background-repeat: no-repeat;
      }

      .flex-wrap .active {
          color: #2E8EFF;
      }

      .flex-wrap .badge {
          position: absolute;
          top: .08rem;
          left: 58%;
          vertical-align: middle;
          min-width: .3rem;
          font-size: .3rem;
          padding: 2px;
          text-align: center;
          color: #fff;
          border-radius: 50%;
          background-color: #ff2600;
      }

    /*.flex-wrap .dot {
          position: absolute;
          top: .07rem;
          left: 60%;
          vertical-align: middle;
          width: .18rem;
          height: .18rem;
          border-radius: .18rem;
          background-color: #ff2600;
      }*/
  </style>
</head>

<body>
    <div class="flex-vertical" id="rootWarp" v-cloak>
      <!--  头部 -->
        <header id="header">
            <div class="header" :class="{on:headers.show==0}" v-for="(headers,index) in header">
                <!--首页头部--->
                <div class="search"  v-if="headers.name=='main'">
                  <input type="search" onclick="openWin('search','search_win.html')" readonly placeholder="输入症状、疾病、科室、医生">
                  <span class="placeholder">
                    <span class="iconfont"></span>
                    <span class="text" onclick="saoma()">
                      <img class="icon_saoma" src="../image/icon_saoma.png" alt="">
                    </span>
                  </span>
                </div>
                <!--问诊页面标题--->
                <div class="friends" v-if="headers.name=='friends'">
                    <!-- <span class="goback" onclick="closeWin()"></span> -->
                    <div class="title">我的问诊</div>
                </div>
                <!--个人中心头部-->
                <div class="my" v-if="headers.name=='ucenter'">
                  <!-- <span class="myback" onclick="closeWin()"></span> -->
                  <div class="right" onclick="openWin('setting','setting_win.html')"></div>
                </div>
            </div>
        </header>
        <!--  sectionflex-con -->
        <section class="flex-con"></section>

        <!--  底部 -->
     <footer id="footer" class="flex-wrap">
         <div class="bar-tab-item flex-con" :class="{active:footers.show==0}" v-for="(footers,index) in footer" @click="fnChange(index);">
             <!-- 聊天列表消息数 -->
             <div class="badge" v-show="footers.name=='问诊' && footers.number>0" >{{footers.number}}</div>
             <i class="icon" :class="fnAddcs(footers.id)"></i>
             <div class="bar-tab-label">{{footers.name}}</div>
         </div>
     </footer>

  </div>
</body>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<!-- 消除移动端点击延迟300ms -->
<script type="text/javascript" src="../script/chat/fastclick.js"></script>
<!-- 公共js -->
<script type="text/javascript" src="../script/chat/common.js"></script>
<!-- 环信接口 -->
<script type="text/javascript" src="../script/chat/easeChat.js"></script>
<!-- sha1加密 -->
<script type="text/javascript" src="../script/chat/SHA1.js"></script>
<script type="text/javascript">
apiready = function() {
    hb_ready();
    //初始化vue
    fnInitVue();
    //获取权限
    isJuris('storage', '存储'); //存储权限
    // isJuris('camera', '相机'); //相机权限
};
//  设置底部点击初始化0防止多次重复点击
var eliminate = 0;

function fnInitVue() {
    window.rootVue = new Vue({
        el: '#rootWarp',
        data: {
            header: [],
            footer: []
        },
        mounted: function() {
            this.$nextTick(function() {
                fnRequest();
                fnInit();
                // 调取环信接口监听新消息
                fnAddMessageListener();
            });
        },
        methods: {

            // 底部图标状态
            fnAddcs: function(id) {
                if (id == 0) {
                    return "main"; //主页图标
                }
                if (id == 1) {
                    return "friends"; //问诊图标
                }
                if (id == 2) {
                    return "ucenter"; //个人中心图标
                }
            },
            //底部tab
            fnChange: function(index) {
                // 防止重复点击
                if (index == eliminate) {
                    return;
                }
                eliminate = index;
                // // 改变头部显示
                // this.header[index].num = 0;
                // // 改变底部显示
                // this.footer[index].num = 0;
                fnActiveIndex(index)
                    //改变页面

            }
        }
    })
}
function closeWin(){
  api.historyBack(function(ret, err){
    if(!ret.status) {
      api.closeWin();
    }
  });
}
// 头部、底部json
function fnRequest() {
  window.rootVue.header = [{
            "id": 0,
            "name": "main",
            "show": 0
        }, {
            "id": 1,
            "name": "friends",
            "show": 1
        }, {
            "id": 2,
            "name": "ucenter",
            "show": 1
        }]
  window.rootVue.footer = [{
        "id": 0,
        "name": "首页",
        "show": 0,
        "url": "main/frame0"
    }, {
        "id": 1,
        "name": "问诊",
        "number": 0,
        "show": 1,
        "url": "chat/frame1"
    }, {
        "id": 2,
        "name": "我的",
        "show": 1,
        "url": "user/frame2"
    }]
}

var eHeader, eFooter, headerH, footerH;

function fnInit() {
    //双击退出
    keyListen();
    eHeader = $api.byId('header');
    eFooter = $api.byId('footer');
    // 设置头部底部fixStatusBar fixTabBar 状态栏跟ios底部栏的自适应高度
    setStatusBar("transparent", "light");
    // 获取头部底部高度
    headerH = $api.offset(eHeader).h;
    footerH = $api.offset(eFooter).h;
    // 初始化group
    fninitFrameGroup();

}

function fninitFrameGroup() {

    var frames = [];
    for (var i = 0; i < window.rootVue.footer.length; i++) {
        frames.push({
            name: window.rootVue.footer[i].url,
            url: './' + window.rootVue.footer[i].url + '_frm.html',
            bounces: false,
            reload: true,
            vScrollBarEnabled: false,
            hScrollBarEnabled: false,
            bgColor: '#F8F8FE'
        });
    };
    api.openFrameGroup({
        name: 'main_group',
        rect: {
          marginLeft: 0,
          marginTop: headerH,
          marginBottom: footerH,
          marginRight: 0,
            // x: 0,
            // y: headerH,
            // w: 'auto',
          h: api.winHeight - headerH - footerH
        },
        scrollEnabled: false,
        preload: 0,
        index: 0,
        frames: frames
    }, function(ret, err) {
        fnActiveIndex(ret.index)
    });
}
//  设置底部跟头部选中状态num
function fnActiveIndex(index) {
    api.setFrameGroupIndex({
        name: 'main_group',
        index: index
    });
    // 头部
    for (var i = 0; i < window.rootVue.header.length; i++) {
        if (i == index) {
            window.rootVue.header[i].show = 0;
        } else {
            window.rootVue.header[i].show = 1;
        }
    }
    // 底部
    for (var i = 0; i < window.rootVue.footer.length; i++) {
        if (i == index) {
            window.rootVue.footer[i].show = 0;
        } else {
            window.rootVue.footer[i].show = 1;
        }
    }
}

function saoma() {
    var FNScanner = api.require('FNScanner');
    FNScanner.open({
        autorotation: true,
        isDrawQRCodeRect: true
    }, function (ret, err) {
        if (ret.eventType == "success") {
            var content = JSON.parse(ret.content.replace(/[\\ \/=]/g, ""))
            // alert(JSON.stringify(content))


            get_ajax("user/user-face-check", {
                userId: $api.getStorage("emp").userId,
                keys: content.key
            }, function (res, errs) {
                if (res.code == 200) {
                    // alert(JSON.stringify(res))
                    post_ajax("im/auto-friend", {
                        uid: $api.getStorage("emp").userId,
                        friendsUid: content.id,
                        friendsAvatar: content.avatar,
                        friendsName: content.nickname,
                    }, function (res, err) {
                        if (ret.code == 200) {
                            toast('扫码成功')
                        } else {
                            if (res.msg == 'success') {
                                toast('添加成功')
                            } else {
                                toast(res.msg)
                            }
                        }
                    })

                } else {
                    toast("扫码失败")
                }
            })
        }
    });
}//endsaoma

</script>

</html>
